<template>
  <div
    ref="content"
    v-debounce="paperScroll"
    class="content"
  >
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      size="medium"
    >
      <el-table-column
        label="日期"
        prop="operateName"
        width="160px"
      >
        <template slot-scope="{row}">
          <p>{{ row.operateTime }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        prop="operateName"
        width="120px"
      >
        <template slot-scope="{row}">
          <p>{{ row.operator }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        prop="operateName"
        width="80px"
      >
      </el-table-column>

      <el-table-column
        label="内容"
        prop="content"
      >
        <template slot-scope="{row}">
          <div
            v-for="(item,index) in row.operates"
            :key="index"
          >
            <p v-if="item.name=='短剧名称'"><span class="label">{{ item.name }}:</span>{{ item.new }} </p>
            <div
              v-else-if="item.name == '阶梯价'"
              style="display:flex;align-items:center"
            >
              <span class="label">{{ item.name }}:</span>
              <div>
                <div
                  v-for="(it, ind) in item.old"
                  :key="ind"
                  class="log-Tabel"
                >
                  <p>起始集 {{ it.start_chapter }}</p>
                  <p>结束集 {{ it.end_chapter }}</p>
                  <p>价格 {{ it.step_coin }}</p>
                </div>
              </div>
              <img
                class="img"
                style="flex-shrink:0"
                src=""
              >
              <div>
                <div
                  v-for="(it, ind) in item.new"
                  :key="ind"
                  class="log-Tabel"
                >
                  <p>起始集 {{ it.start_chapter }}</p>
                  <p>结束集 {{ it.end_chapter }}</p>
                  <p>价格 {{ it.step_coin }}</p>
                </div>
              </div>
            </div>
            <p v-else>
              <span class="label">{{ item.name }}:</span>
              <label v-if="item.old && item.old!==''">
                <span>{{ item.old }}</span>
                <img
                  class="img"
                  src=""
                >
              </label> {{ item.new }}
            </p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script type="text/javascript">
import { getSystemModelLog } from '@/api/common'
import debounce from '@/directive/debounce/index'
export default {
  directives: {
    debounce
  },
  // type 3:image 4:video
  props: ['info'],
  data() {
    return {
      list: [],
      pageInfo: {
        page: 1,
        limit: 20,
        total: 0
      },
      isMoreRecord: true, // 是否还有更多聊天记录
      uploadMeta: {
        title: '',
        picurl: ''
      }
    }
  },
  watch: {},
  mounted() {
    this.requestTable()
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    requestTable() {
      getSystemModelLog({ id: this.info.id, model: 'channel_playlet', object_type: 'id' }).then((res) => {
        this.list = res.data.data.map((item, index) => {
          item.operates = item.operates.map((it, index) => {
            if (it.name === '阶梯价') {
              return {
                ...it,
                old: it.old ? JSON.parse(it.old) : [],
                new: it.new ? JSON.parse(it.new) : []
              }
            } else {
              return it
            }
          })
          return item
        })
        console.log(this.list)
        if (res.data.data.length < 20) {
          this.isMoreRecord = false
        } else {
          this.isMoreRecord = true
        }
      })
    },
    requestNextPage(pageInfo) {
      this.pageInfo.page++
      this.requestTable()
    },
    // 滚动事件
    paperScroll() {
      // 监听滚动事件
      const el = this.$refs.content
      if (el.offsetHeight + el.scrollTop >= el.scrollHeight && this.isMoreRecord) {
        this.requestNextPage()
      } else if (!this.isMoreRecord) {
        // this.$message({
        //   type: 'error',
        //   message: '没有更多数据了'
        // })
      }
    },
    submit() {}
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100% - 100px);
  overflow: auto;
  padding: 20px;
  .label {
    flex-shrink: 0;
    flex-grow: 0;
    color: #999;
    padding-right: 10px;
  }
  .img {
    width: 20px;
    margin: 0 5px;
  }
}
.log-Tabel {
  border: 1px solid #333;
  padding: 5px;
  margin: 5px;
}
</style>
